<template>
  <div class="detail">
    <el-card>
      <!-- 打印按钮 -->
      <div v-if="activeName !== 'first'" class="mybtn">
        <el-button class="btn" @click="toPrint">打印页面</el-button>
      </div>
      <!-- tabs结构 -->
      <el-tabs v-model="activeName">
        <el-tab-pane label="登录账户设置" name="first">
          <el-form :model="userform" label-width="55px" class="myform">
            <el-form-item label="姓名">
              <el-input v-model="userform.departmentName" />
            </el-form-item>
            <el-form-item label="密码">
              <el-input v-model="userform.password" type="password" />
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="editUserInfo">更新</el-button>
              <el-button @click="$router.back()">取消</el-button>
            </el-form-item>
          </el-form>
        </el-tab-pane>
        <el-tab-pane label="个人详情" name="second">
          <userinfo />
        </el-tab-pane>
        <el-tab-pane label="岗位信息" name="third">
          <jobinfo />
        </el-tab-pane>
      </el-tabs>
    </el-card>
  </div>
</template>

<script>
import userinfo from '../component/userinfo.vue'
import jobinfo from '../component/jobinfo.vue'
import { getUserInfoAPI, setUserInfoAPI } from '@/api/index'
export default {
  components: {
    userinfo,
    jobinfo
  },
  data() {
    return {
      // 当前选中的 tabs
      activeName: 'first',
      // 表单数据源
      userform: {},
      // 获取路径传入的id
      id: this.$route.query.id
    }
  },
  // 压面加载完毕时调用
  created() {
    this.getUserInfo()
  },
  methods: {
    toPrint() {
      // 点击时跳转到打印页面
      this.$router.push(`/employees/print?active=${this.activeName}`)
    },
    // 获取员工的基本信息
    async getUserInfo() {
      const res = await getUserInfoAPI(this.id)
      // console.log(res)
      this.userform = res.data
    },
    // 点击时修改用户信息
    async editUserInfo() {
      if (this.userform === this.userform) {
        this.$router.back()
      } else {
        const res = await setUserInfoAPI(this.userform)
        // console.log(res)
        this.$message.success(res.message)
        this.$router.back()
      }
    }
  }
}
</script>

<style lang="scss">
.detail {
  margin: 25px;
  .myform {
    width: 360px;
    margin: 20px 0 0 100px;
    .el-input__inner {
      height: 30px;
    }
  }
  .mybtn {
    position: relative;
    .btn {
      position: absolute;
      top: 0;
      right: 0;
      z-index: 999;
    }
  }
}
</style>
